<template>
  <n-button v-if="renderIcon" v-bind="props" :render-icon="renderIcon">
    <slot />
  </n-button>
  <n-button v-bind="props" v-else>
    <slot />
  </n-button>
</template>

<script setup lang="tsx">
import type { VNodeChild } from 'vue';
import type { CButtonProps } from '../index'
const props = defineProps<CButtonProps>();
const renderIcon = ref()
const init = async () => {
  const materialIcon = await import('@vicons/material');
  const AndIcon = await import('@vicons/antd');
  const FluentIcon = await import('@vicons/fluent');
  const Icon = { ...materialIcon, ...AndIcon, ...FluentIcon }[props.iconName!];
  renderIcon.value = Icon ? () => <n-icon><Icon /></n-icon> as VNodeChild : null;
}
init()
</script>